<template>
  <div class="box">
    <div class="container">
      <!-- 左侧logo -->
      <div class="left-container">
        <div class="left-text">
          <!-- <img :src="$store.state.system.logo" alt="" /> -->
          <p>查分后台管理系统</p>
        </div>
      </div>
      <!-- 右侧登录表单 -->
      <section class="form">
        <el-form>
          <el-form-item class="loginBox">
            <el-input
              placeholder="账 号"
              v-model.trim="loginParam.name"
              prop="account"
            >
              <template slot="prepend">
                <span class="el-icon-user"></span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="loginBox">
            <el-input
              placeholder="密 码"
              type="password"
              v-model.trim="loginParam.pwd"
              show-password
              @keyup.enter.native="loginAjax"
            >
              <template slot="prepend">
                <span class="el-icon-lock"></span>
              </template>
            </el-input>
          </el-form-item>
          <!-- <section class="title-bottom loginBox">
            <a href="javascript:void(0)">忘记密码</a>
          </section> -->
          <el-form-item class="loginBox">
            <el-button class="full" type="primary" @click.native="loginAjax"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </section>
    </div>

    <canvas id="canvas" ref="canvas"></canvas>
  </div>
</template>

<script setup>
import { Login } from '@/Api/pc';
import { getCanvas } from '@/utils/canvas.js';
import useUserStore from '@/store/userInfoStore';
import { ElMessage } from 'element-plus';

const userStore = useUserStore();
const router = useRouter();
onMounted(() => {
  getCanvas();
});
const loginParam = reactive({
  name: '',
  pwd: '',
});

const loginAjax = () => {
  if (loginParam.name == '') {
    ElMessage({
      message: '账号不能为空',
      type: 'warning',
      offset: 10,
    });
  } else if (loginParam.pwd == '') {
    ElMessage({
      message: '密码不能为空',
      type: 'warning',
      offset: 10,
    });
  } else {
    Login({ ...loginParam }).then((res) => {
      window.sessionStorage.setItem('uid', res.obj.uid);
      userStore.changeInfo();
      router.push('/welcome');
    });
  }
};
</script>

<style lang="scss" scoped>
#canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.full {
  margin-top: 10px;
  width: 100%;
}

.container {
  display: flex;
  overflow: hidden;

  .left-container {
    width: 50%;
    height: 90vh;
    .left-text {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      img {
        display: inline-block;
        margin-bottom: 5px;
      }
      p {
        font-size: 30px;
        margin-bottom: 20px;
        font-weight: 600;
      }
    }
  }
  .form {
    display: flex;
    align-items: center;
    // background-color: #e5e5e5;
    justify-content: center;
    width: 50%;
    height: 90vh;
    z-index: 2;

    .el-form {
      width: 320px;
      height: 220px;
      background-color: #fff;
      box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
      padding: 15px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;

      .loginBox {
        width: 80%;
      }

      .title-bottom {
        text-align: right;
        font-size: 12px;
        a {
          text-decoration: none;
          color: #555;
        }
        a:hover {
          color: #409eff;
        }
      }
    }
  }
}
</style>
